<template>
  <div class="bg-gray-100 min-h-screen">
    <!-- Orange Tech Style Header -->
    <header class="bg-gray-100 border-b border-gray-200">
      <div class="max-w-8xl mx-auto px-8 sm:px-16 lg:px-24">
        <div class="flex h-16 items-center justify-between">
          <!-- Logo -->
          <div class="flex items-center">
            <Link href="/" class="flex items-center">
              <img src="/images/logo.svg" alt="Orange Tech" class="h-10" />
            </Link>
          </div>

          <!-- Back to Store -->
          <Link 
            href="/" 
            class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200"
          >
            返回商店
          </Link>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main class="flex-1 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
      <div class="max-w-md w-full">
        <!-- Auth Card -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
          <div class="px-8 py-10">
            <slot />
          </div>
        </div>

        <!-- Footer Links -->
        <div class="mt-8 text-center">
          <div class="flex justify-center space-x-6 text-sm text-gray-600">
            <a href="#" class="hover:text-gray-900 transition-colors">
              隐私政策
            </a>
            <a href="#" class="hover:text-gray-900 transition-colors">
              服务条款
            </a>
            <a href="#" class="hover:text-gray-900 transition-colors">
              帮助中心
            </a>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { Link } from '@inertiajs/vue3'
</script>